<template>
  <div>
    <el-main :style="{ '--zoom': zoom }">
      <el-row>
        <el-col :span="24">
          <div class="select">
            <div class="left">
              <el-button type="primary" @click="getsearch()">
                新增
              </el-button>
              <el-select v-model="enterprise" placeholder="企业标签" @change="enterpriseSearch" clearable>
                <el-option v-for="item in enterpriseLiat" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>

            <el-input style="width:300px" v-model="value" placeholder="请输入企业名称" @keyup.enter.native="visitList(value)"
              clearable @clear="visitList(value)"> </el-input>
          </div>

        </el-col>
        <el-col class="fw_table">

          <el-table v-loading="loading" @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }"
            :data="tableData" style="width: 100%">
            <el-table-column prop="company" label="企业名称">
            </el-table-column>
            <el-table-column label="企业标签">
              <template slot-scope="scope">
                <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.one"
                  :key="scope.row.demand_id + item.honor.name">
                  {{ item.honor.name }}
                </el-tag>
                <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.two"
                  :key="scope.row.demand_id + item.name">
                  {{ item.name }}
                </el-tag>
                <el-tag class="b_bule" size="small" v-for="item in scope.row.company_label.three"
                  :key="scope.row.demand_id + item.name">
                  {{ item.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="patent" label="发明专利" align="center">
            </el-table-column>
            <el-table-column prop="news" label="新型" align="center">
            </el-table-column>
            <el-table-column prop="apper" label="外观" align="center">
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <div style="display: flex; justify-content: center">
                  <div>
                    <el-button @click.stop="goVisit(scope.row)" type="primary" round size="mini" class="">
                      查看
                    </el-button>
                  </div>

                </div>
              </template>
            </el-table-column>

            <!-- 自定义内容，空数据时的显示 -->
            <template slot="empty">
              <div class="custom-empty">
                <i class="el-icon-warning"></i>
                <span>没有找到对于企业，是否<span @click="getsearch(value)" style="color:#2b68f6;cursor: pointer;">新增</span>该企业</span>
              </div>
            </template>
          </el-table>

        </el-col>
        <el-col :span="24" class="fw_page">
          <div class="pagination" style="margin-top: 30px;">
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
              layout="total, prev, pager, next, jumper" :total="Number(count)" align="left"></el-pagination>
          </div>
        </el-col>
      </el-row>

      <el-dialog title="新增企业" :visible.sync="dialogVisible" width="30%" @close="cancel">
        <div style="display: flex">
          <el-autocomplete ref="selectRef" clearable style="width: 100%" class="publicStyle" v-model="company"
            :fetch-suggestions="querySearch" placeholder="请输入公司名称检索走访记录" :trigger-on-focus="false"
            :popper-append-to-body='false' @select="setSelectItem" @change="changeValue">
            <template slot-scope="{ item }">
              <div style="display: flex; justify-content: space-between">
                <div class="name">{{ item.company_name }}</div>
                <div class="name">{{ item.num }}</div>
              </div>
            </template>
          </el-autocomplete>
          <div style="display: flex; align-items: center">
            <el-button :loading="buttonType" style="margin-left: 10px;" type="primary" plain
              @click="handleSearchTYC">搜索</el-button>
          </div>
        </div>
        <span slot="footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="handleSelect(SelectItem)">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import {
  visitDel,
  demandLabel,
  getCompany,
  visitList,
  companyLabel,
  companyListNew,
  seachCompany,
} from "@/api/configApi";
import { VUE_APP_BASE_API } from '@/config'
export default {
  data() {
    return {
      company: '',
      region_id: this.$store.state.user.region_id,
      buttonType: false,
      loading: true,
      deleteId: '',
      tableData: [],
      page: 1,
      limit: 10,
      demandLiat: [],
      enterprise: "",
      enterpriseLiat: [],
      demand: "",
      count: 0,
      value: '',
      seachCompanyList: [],
      timeShow: false,
      zoom: 1,
      dialogVisible: false,
      SelectItem: {},
    };
  },
  //过滤器
  filters: {
    //日期格式化
    formatDate: function (value) {
      if (value) {
        return value.substring(0, 16)
      }
    },
  },
  components: {},
  mounted() {
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
    this.companyLabel()
    this.visitList()

    this.enterprise  = this.$route.query.label ? Number(this.$route.query.label) : ''
  },
  //监听
  watch: {

  },
  methods: {
    companyLabel() {
      companyLabel({
        region_id: this.region_id
      }).then(res => {
        this.enterpriseLiat = res.list
      })
    },
    enterpriseSearch() {
      this.visitList()
    },
    demandSearch() {
    },
    handleCurrentChange(val) {
      this.page = val
      this.visitList()
    },
    getsearch(value) {
      this.dialogVisible = true;
      this.company = value
    },
    querySearch(queryString, cb) {
      cb([]);
    },
    handleSearchTYC() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.company == "") {
        this.$message({
          message: "请输入公司名称",
          type: "warning",
        });
        return;
      }
      this.buttonType = true;
      this.timer = setTimeout(() => {
        seachCompany({ keword: this.company, region_id: this.region_id }).then((res) => {
          this.buttonType = false;
          this.seachCompanyList = res.slice(0, 1000);

          this.seachCompanyList.forEach((item) => {
            item.searchType = true;
          });
          console.log(this.seachCompanyList, 'seachCompanyList');
          var restaurants = this.seachCompanyList;
          this.$refs["selectRef"].$data.suggestions = restaurants;
          this.$refs.selectRef.focus();
        });
      }, 500);
    },
    cancel() {
      this.company = "";
      this.dialogVisible = false;
      this.SelectItem = {};
    },
    changeValue(value) {
      this.SelectItem = {};
      console.log(value, 'value');
      console.log(this.company, 'value');
    },
    setSelectItem(item) {
      this.SelectItem = item;
      this.company = item.company_name ? item.company_name : item;
    },
    handleSelect(item) {
      if (!item.searchType) {
        this.$message({
          message: "请选择搜索结果",
          type: "warning",
        })
        return
      }
      this.company = item.company_name ? item.company_name : item;
      let id = "";

      if (!item.id) {
        getCompany({ company: item.company_name }).then((res) => {
          this.$router.push({
            path: "/workEnterprisevisitNew",
            query: {
              company_id: res.id,
              company_name: item.company_name,
            },
          });
          this.company = "";
        });
      } else {
        this.$router.push({
          path: "/workEnterprisevisitNew",
          query: {
            company_id: item.id,
            company_name: item.company_name,
          },
        });
        this.company = "";
      }
    },
    visitList() {
      this.loading = true
      companyListNew(
        {
          region_id: this.region_id,
          page: this.page,
          limit: this.limit,
          keywords: this.value,
          company_label: this.enterprise,
        }
      ).then(res => {
        this.loading = false
        this.tableData = res.list;
        this.count = res.count
      })
    },

    tableclick(row, column, event) {

      if (row.company_id) {
        this.$router.push({
          path: '/workEnterprisevisitNew',
          query: {
            id: row.id,
            company_id: row.company_id,
          }
        })
      } else {
        getCompany({
          company: row.company
        }).then(res => {
          this.$router.push({
            path: '/workEnterprisevisitNew',
            query: {
              id: row.id,
              company_id: res.id,
            }
          })
        })
      }

    },
    goVisit(row) {
      this.tableclick(row)
      // this.$router.push({
      //   path: "/workVisit",
      //   query: {
      //     id: row.have_visit != 2 ? row.id : row.demand_id,
      //     have_visit: row.have_visit
      //   },
      // });
    },

  },
};
</script>

<style scoped lang="less">
.select {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    width: 300px;
    justify-content: space-between;
    align-items: center;
  }
}

.el-main {
  zoom: var(--zoom);
}

.b_bule {
  background-color: #D3E2FF;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585FF;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #FF5F58;
  background-color: #FFF6F5;
}

.b_red2 {
  color: #FFFFFF;
  background-color: #FF5F58;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377FF;
  background-color: #ebf2ff;
  border: 1px solid #387DFF;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  // button {
  //   padding: 5px 30px;
  //   width: 139px;
  //   height: 38px;
  //   background: #387DFF;
  //   border: 1px solid #E8ECEF;
  //   border-radius: 19px;
  //   font-size: 14px;
  // }
}


::v-deep .el-table__row td:nth-child(6) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
  // font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

.item_list_tag {
  color: #FFF6F5 !important;
  background-color: #FF5F58 !important;
  padding: 0 5px !important;
}

::v-deep .el-input__icon {
  // line-height: 38px;
  // font-size: 16px;
}

::v-deep .has-gutter tr th:nth-child(2),
::v-deep .has-gutter tr th:nth-child(3),
// ::v-deep .has-gutter tr th:nth-child(5),
::v-deep .has-gutter tr th:nth-child(6),
::v-deep .has-gutter tr th:nth-child(7),
::v-deep .has-gutter tr th:nth-child(8),
::v-deep tbody tr td:nth-child(2),
::v-deep tbody tr td:nth-child(3),
// ::v-deep tbody tr td:nth-child(5),
::v-deep tbody tr td:nth-child(7),
::v-deep tbody tr td:nth-child(6) {
  text-align: center;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

.Visitdate {
  margin-top: 62px;
}

::v-deep tbody tr td {
  font-size: 14px;
  color: #334681;
}

::v-deep .el-table__row td:nth-child(7) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.fw_title {
  font-weight: bolder;
  font-size: 24px;
}

.line {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ebeaed;
}

.fw_form {
  margin-top: 15px;

  .form_add {
    .el-button {
      height: 38px;
      line-height: 5px;
      background-color: #ebf2fd;
      color: #3377FF;
      font-size: 16px;
      border: 1px solid #387DFF;


    }

    // .el-button:hover {
    //   background-color: #ebf2fd;
    //   border: 1px solid #387DFF;
    //   color: #3377FF;
    // }
  }

  .form_output {
    .el-button {
      padding: 0px 35px;
      font-size: 16px;
      height: 38px;
      line-height: 5px;
      background-color: #387DFF;
    }

  }

  .form_date {
    div {
      // padding-right: 0 !important;
      // padding-left: 0 !important;
    }
  }
}

.fw_table {
  margin-top: 15px;

  .item_list {
    display: inline-block;
    background-color: #D3E2FF;
    margin: 3px 5px;
    border-radius: 5px;
    padding: 0px 5px;
    color: #387DFF;
  }

  .item_demand {
    color: #FF5F58;
    background-color: #FFF6F5;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
  margin-top: 22vh !important;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
